import React, { useEffect, useRef, useState } from 'react';
import {
  View,
  TouchableOpacity,
  Image,
  RefreshControl,
  ScrollView,
  Linking
} from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';
import { ItemHRow, InputModal, SeekBar } from '../compoment';
import { showMessage, hideMessage } from 'react-native-flash-message';

function AboutUsPage({ navigation }) {

  const setArrData = [
    {
      id: 's1',
      sv: 'www.riderawrr.com',
      unit: '',
      des: 'Website',
      type: 3,
    },
    // {
    //   id: 's2',
    //   sv: 'Los Angeles, California',
    //   unit: '',
    //   des: 'Address',
    //   type: 3,
    // },
    // {
    //   id: 's3',
    //   sv: 'support@riderawrr.com',
    //   unit: 'S',
    //   des: 'Email',
    //   type: 3,
    // },
    {
      id: 's4',
      sv: '',
      unit: '',
      des: 'Help',
      type: 2,
    }];

  React.useLayoutEffect(() => {
    navigation.setOptions({
      title: 'Help',
      headerLeft: () => (
        <TouchableOpacity
          onPress={() => navigation.goBack()}
          style={{ paddingHorizontal: 15 }}>
          <View>
            <Image
              source={require('../images/icon_back.png')}
              style={{ height: 24, width: 24 }}
            />
          </View>
        </TouchableOpacity>
      ),
    });
  }, [navigation]);

  const renderSetItem = ({ item, index }) => (
    <ItemHRow
      key={item.id}
      data={item}
      clickAction={() => clickAtIndex(index)}
    />
  );

  function clickAtIndex(index) {
    switch (index) {
      case 0:
        Linking.openURL('https://www.riderawrr.com');
        break;
      // case 1:
      //   copyToClipboard('Los Angeles, California')
      //   break;
      // case 2:
      //   Linking.openURL('mailto:support@riderawrr.com');
      //   break;
      case 1:
        Linking.openURL('https://riderawrr.com/pages/service-and-support');
        break;
      default:
        break;
    }
  }

  const copyToClipboard = str => {
    showMessage({
      message: 'Copy succeeded',
      type: 'success',
      icon: 'success',
      duration: 3000,
    });
    Clipboard.setString(str);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', backgroundColor: '#DDDDDD' }}>
      <ScrollView style={{ flex: 1, marginTop: 80, width: '100%' }} showsVerticalScrollIndicator={false}>
        {
          setArrData.map((item, index) => {
            return (renderSetItem({ item, index }))
          })
        }
      </ScrollView>
    </View>
  )
}

export default AboutUsPage;